<template>
  <div v-if="dataList" class="content-wrapper">
    <div class="content-header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="content-container">
            <div class="filter-container" />
            <div class="block-box">
              <div class="block-left">
                <div class="block">
                  <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                      <span>基本信息</span>
                    </div>
                    <el-form>
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="文件名称">
                            {{ documentResponse.documentName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="文件编号" min-width="220">
                            <i>{{ documentResponse.documentCode }}</i>
                          </el-form-item>
                        </el-col>
                        <el-col v-if="documentResponse.version" :span="8">
                          <el-form-item label="版本号">
                            {{ documentResponse.version }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col v-if="documentResponse.level" :span="8">
                          <el-form-item label="文件等级">
                            {{ documentResponse.levelString }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="文件属性">
                            {{ documentResponse.propertyString }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="紧急程度">
                            {{ documentResponse.status == 0 ? '正常' : '紧急' }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col v-if="dataList.length > 1" :span="18">
                          <el-form-item label="文件模板">
                            {{ documentResponse.documentName }}
                            {{ documentResponse.fileExtension }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col
                          v-if="personnel('newApply', 'newApplyData')"
                          :span="8"
                        >
                          <el-form-item label="起草人">
                            {{ newApplyData.handleUserName }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="日期">
                            {{ newApplyData.updateTime }}</el-form-item
                          ></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col
                          v-if="personnel('audit', 'auditData')"
                          :span="8"
                        >
                          <el-form-item label="审核人">
                            {{ auditData.handleUserName }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="日期">
                            {{ auditData.updateTime }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col
                          v-if="personnel('approve', 'approveData')"
                          :span="8"
                        >
                          <el-form-item label="批准人">
                            {{ approveData.handleUserName }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="日期">
                            {{ approveData.updateTime }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col v-if="row.effectDate" :span="18">
                          <el-form-item label="生效日期">
                            {{ row.effectDate }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-form-item label="发放部门">
                          <el-tag
                            v-for="item in groupNameData"
                            :key="item.id"
                            closable
                            @close="handleClose(item.id, 1)"
                          >
                            {{ item.label }}
                          </el-tag>
                          <!-- <el-button
                            size="mini"
                            round
                            circle
                            icon="el-icon-plus"
                            @click="openReview(0)"
                          /> -->
                        </el-form-item>
                      </el-row>
                      <el-row>
                        <el-form-item label="发放人员">
                          <el-tag
                            v-for="item in userNameData"
                            :key="item.id"
                            closable
                            @close="handleClose(item.id, 0)"
                          >
                            {{ item.label }}
                          </el-tag>
                          <!-- <el-button
                            size="mini"
                            round
                            circle
                            icon="el-icon-plus"
                            @click="openReview(1)"
                          /> -->
                        </el-form-item>
                      </el-row>
                      <el-form-item>
                        <el-button
                          class="filter-item"
                          size="small"
                          round
                          icon="el-icon-plus"
                          @click="grantDialogVisible = true"
                        >
                          增加发放
                        </el-button>
                      </el-form-item>
                    </el-form>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程信息" name="flow">
          <div class="content-container">
            <div class="filter-container" />
            <div class="block-box">
              <div class="block-left">
                <div class="block">
                  <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                      <span>流程信息</span>
                    </div>
                    <el-table
                      :data="dataList"
                      :show-header="false"
                      style="width: 100%"
                    >
                      <el-table-column width="100px">
                        <template slot-scope="{ row }">
                          <el-tag v-if="row.result === 1" type="success">{{
                            row.phaseName
                          }}</el-tag>
                          <el-tag v-if="row.result === 2" type="danger">{{
                            row.phaseName
                          }}</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="handleUserName" width="150px" />
                      <el-table-column prop="opinion" />
                      <el-table-column prop="createTime" width="160px" />
                    </el-table>
                  </el-card>
                  <el-card
                    v-if="
                      dataList.length !== 0 &&
                      dataList[dataList.length - 1].phase == 'release'
                    "
                    class="box-card"
                    shadow="hover"
                  >
                    <template>
                      <div slot="header" class="clearfix">
                        <span>签收情况</span>
                      </div>
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        row-key="keys"
                        :tree-props="{
                          children: 'userResponses',
                          hasChildren: true
                        }"
                      >
                        <el-table-column prop="label" label="签收人" />
                        <el-table-column prop="signForStatus" label="签收情况">
                          <template slot-scope="{ row }">
                            <el-tag
                              v-if="row.signForStatus == 0"
                              size="mini"
                              type="danger"
                              >未签收</el-tag
                            >
                            <el-tag
                              v-if="row.signForStatus == 1"
                              size="mini"
                              type="success"
                              >已签收</el-tag
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="培训信息" name="second">
          <div class="content-container">
            <div class="filter-container"></div>
            <div class="block-box">
              <div class="block-left">
                <div class="block">
                  <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                      <span>培训信息</span>
                    </div>
                    <el-form>
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="培训名称">
                            {{ this.trainResponses.name }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="培训内容">
                            <i>{{ this.trainResponses.content }}</i>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="培训类型">
                            {{ this.trainResponses.type }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="培训方式">
                            {{ this.trainResponses.mode }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="培训讲师">
                            {{ this.trainResponses.trainerUserId }}
                          </el-form-item></el-col
                        >
                        <el-col :span="8">
                          <el-form-item label="开始时间">
                            {{ this.trainResponses.startTime }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col :span="18" >
                          <el-form-item label="结束时间">
                            {{ this.trainResponses.endTime }}
                          </el-form-item></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col :span="18">
                          <el-form-item label="培训状态">
                            {{ this.trainResponses.status }}
                          </el-form-item></el-col
                        >
                      </el-row>
                    </el-form>
                  </el-card>
                  <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                      <span>培训情况</span>
                    </div>
                    <el-table :data="dataList" style="width: 100%">
                      <el-table-column prop="date" label="培训人">
                      </el-table-column>
                      <el-table-column
                        label="培训成绩"
                        prop="handleUserName"
                      ></el-table-column>
                      <el-table-column
                        label="是否通过培训"
                        prop="opinion"
                      ></el-table-column>
                      <el-table-column
                        label="培训时间"
                        prop="createTime"
                      ></el-table-column>
                    </el-table>
                  </el-card>
                </div>
              </div>
            </div>
          </div></el-tab-pane
        > -->
      </el-tabs>

      <div class="my-switch">
        <div class="my-i">生效开关：</div>
        <el-switch
          v-model="row.effectValve"
          :disabled="disabled"
          @change="getSwitch"
          >{{ row }}</el-switch
        >
      </div>
    </div>
    <el-dialog
      title="增加发放"
      :visible.sync="grantDialogVisible"
      class="mini my-time"
    >
      <el-form ref="grantForm" v-model="grantForm">
        <el-form-item label="选择发放类型">
          <el-select v-model="TYPE" placeholder="请选择">
            <el-option
              v-for="item in grantOptions"
              :key="item.label"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="TYPE === 0" label="增加发放人员">
          <el-tag v-for="(item, index) in userList" :key="index">{{
            item.label
          }}</el-tag>
          <el-button
            size="mini"
            round
            circle
            icon="el-icon-plus"
            @click="openReview(0)"
          />
        </el-form-item>
        <el-form-item v-if="TYPE === 1" label="增加发放部门">
          <el-tag v-for="(item, index) in groupList" :key="index">{{
            item.label
          }}</el-tag>
          <el-button
            size="mini"
            round
            circle
            icon="el-icon-plus"
            @click="openReview(1)"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="grantDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddGrantDate">确 定</el-button>
      </span>
    </el-dialog>

    <SearchUserList
      :search-user-list-data="SearchUserListData"
      @SearchUserList="SearchUserList"
    />
    <SelectGroupList
      :select-group-list-data="SelectGroupListData"
      @UserGroupListData="UserGroupListData"
    />
  </div>
</template>

<script>
import SearchUserList from '@/components/SearchUserList/index'
import SelectGroupList from '@/components/SelectGroupList/index.vue'
import { clearRepetitiveNewArr, clearPushArr } from '@/utils/common.js'

import {
  getPhase,
  getFlow,
  getPhaseSmall,
  releaseCheck,
  loseEffect,
  takeEffect,
  getDocumentInfoOfRelease,
  addReceive,
  deleteReceiveList,
  addReceiveList
} from '@/api/xd/documentFlow'

export default {
  components: { SearchUserList, SelectGroupList },
  data() {
    return {
      activeName: 'first',
      dataList: [{ flowType: '' }],
      id: '',
      tableData: [],
      effectFlag: '',
      row: {},
      disabled: false,
      documentResponse: {},
      newApplyData: '',
      auditData: '',
      approveData: '',
      groupNameData: [],
      userNameData: [],
      trainResponses: '',
      receiveUserGroupIdList: [],
      grantDialogVisible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      flowOptions: [],
      grantForm: null,
      SelectGroupListData: {},
      SearchUserListData: {
        dialogVisible: false
      },
      userList: [],
      groupList: [],
      grantOptions: [
        { key: 0, label: '个人' },
        { key: 1, label: '部门' }
      ],
      TYPE: 0
    }
  },
  watch: {
    dataList(data) {
      // this.getDocumentInfoOfRelease()
      this.signCondition()
    }
  },
  mounted() {
    this.row = JSON.parse(this.$route.query.row)
    this.disabled = this.row.effectValve
    this.getDocumentInfoOfRelease()
  },
  methods: {
    dispose() {
      const row = this.$route.query.row
      if (row.flowType == 1 || row.flowType == 2) {
        this.$router.push({
          path: getFlow(row.flowType) + row.documentFlowId,
          query: {
            phase: getPhase(row.phase)
          }
        })
      } else {
        this.$router.push({
          path: getFlow(row.flowType) + row.documentFlowId,
          query: {
            phase: getPhaseSmall(row.phase)
          }
        })
      }
    },
    async signCondition() {
      if (this.dataList.length !== 0) {
        if (this.dataList[this.dataList.length - 1].phase == 'release') {
          const { data } = await releaseCheck({
            documentFlowId: this.row.documentFlowId
          })
          console.log(data, 'wwwwwwwwwwwwwwwwwww')
          const tableDataList =
            [...data.groupResponses, ...data.userResponses] || []
          tableDataList.forEach((item) => {
            if (item.userResponses == null && item.signForStatus == null) {
              delete item.userResponses
            } else {
              item.keys = item.id
              if (item.userResponses) {
                item.userResponses.forEach((item2) => {
                  item2.keys = item2.id + 'user'
                })
              }
            }
          })
          console.log(tableDataList, 'uuuuuuuu')
          this.tableData = tableDataList
        }
      }
    },
    // 点击标签
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 生效开关
    getSwitch(row) {
      if (row) {
        takeEffect({ documentReleaseId: this.row.documentReleaseId }).then(
          (res) => {
            if (res.code == 1) {
              this.$message.success('生效成功')
            }
          }
        )
      } else {
        loseEffect({ documentReleaseId: this.row.documentReleaseId }).then(
          (res) => {
            if (res.code == 1) {
              this.$message.success('取消生效成功')
            }
          }
        )
      }
    },
    // 培训信息
    getDocumentInfoOfRelease() {
      getDocumentInfoOfRelease({
        documentFlowId: this.row.documentFlowId
      }).then((res) => {
        this.dataList = res.data.documentFlowHandleResponses
        this.documentResponse = res.data.documentResponse
        this.groupNameData =
          res.data.documentReleaseStatusResponse.groupResponses || []
        this.userNameData =
          res.data.documentReleaseStatusResponse.userResponses || []
        if (res.data.trainResponses) {
          this.trainResponses = res.data.trainResponses[0]
        }
      })
    },
    // 基本信息人员

    personnel(node, res) {
      var result = false
      this.dataList.map((item) => {
        if (item.phase == node) {
          result = true
          this[res] = item
        }
      })
      return result
    },
    saveAddGrantDate() {
      const documentCodeList = this.documentResponse.documentCode

      const receiveIdList = []
      if (this.TYPE === 0) {
        this.userList.forEach((e) => {
          receiveIdList.push(e.id)
        })
      } else {
        this.groupList.forEach((e) => {
          receiveIdList.push(e.id)
        })
      }
      const data = {
        documentCodeList: [documentCodeList],
        receiveIdList: receiveIdList,
        receiveType: this.TYPE,
        releaseAllFlag: false
      }
      addReceiveList(data).then((res) => {
        this.grantDialogVisible = false
        this.getDocumentInfoOfRelease()
        this.$message.success('新增成功')
      })
    },
    UserGroupListData(data) {
      this.groupList = data
    },
    SearchUserList(data) {
      this.userList = data
    },
    openReview(type) {
      if (type === 0) {
        this.SearchUserListData = {
          dialogVisible: true
        }
      } else {
        this.SelectGroupListData = {
          dialogVisible: true
        }
      }
    },
    handleClose(id, type) {
      this.$confirm('此操作将删除改发放人员或部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (type === 0) {
            this.userNameData.splice(this.userNameData.indexOf(id), 1)
          } else {
            this.groupNameData.splice(this.groupNameData.indexOf(id), 1)
          }
          const data = {
            documentFlowId: this.row.documentFlowId,
            receiveIdList: [id],
            receiveType: type
          }
          deleteReceiveList(data).then((res) => {
            this.$message.success('删除成功')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scope >
.block-left {
  height: 85vh;
  overflow-y: auto;
  .el-timeline-me {
    width: 60vw;
    .el-card__body {
      padding: 20px;
    }
  }
}
.block-right {
  padding-left: 50px;
}
.el-table {
  height: auto;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 96%;
  margin: 0 0 20px 0;
}
.content-wrapper {
  padding: 20px;
}
.content-header {
  position: relative;
}
.my-switch {
  position: absolute;
  top: 2vh;
  right: 5vw;
}
.my-i {
  font-size: 14px;
  color: #303133;
  display: inline-block;
  // margin-right: 10px;
}
.my-button {
  margin-left: 20px;
  border: 0;
}
</style>

